<template>
    <view>
        <view class="item">
            <view>用户名</view>
            <view><input type="text" placeholder="请输入用户名" v-model="username"></view>
        </view>
        <view class="item">
            <view>密码</view>
            <view><input type="password" placeholder="请输入密码" v-model="pass_show"></view>
        </view>
        <view class="items">
            <view>商户有效期:</view>
            <view @click="show = true">{{ timeSelect }}</view>
        </view>
        <view class="itemBox">
            <view class="item_1">图片清晰度：</view>
            <view class="item_2">
                <u-radio-group placement="row" size="30rpx" labelSize="20rpx" v-model="image_clear">
                    <u-radio activeColor="#007aff" label="普通" :name="1"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="高清" :name="2"></u-radio>
                    <view style="width: 30rpx;height: 10rpx;"></view>
                    <u-radio activeColor="#007aff" label="超清" :name="3"></u-radio>
                </u-radio-group>
            </view>
        </view>
        <view class="item">
            <view>云储存空间</view>
            <view><input type="number" placeholder="商户最大云储存空间(单位/M)" v-model="save_area"></view>
        </view>
        <view class="item">
            <view>车辆数</view>
            <view><input type="number" placeholder="商户最大车辆数" v-model="max_vihicle_count"></view>
        </view>
        <view class="item">
            <view>微信账号</view>
            <view><input type="text" placeholder="请输入商户微信账号" v-model="wechat"></view>
        </view>
        <view class="item">
            <view>备注</view>
            <view><input type="text" placeholder="备注内容" v-model="content"></view>
        </view>
        <view class="submit" @click="submit">确认</view>
        <u-datetime-picker :show="show" :formatter="formatter" v-model="timeValue" mode="date" @confirm="confirmTime"
            @cancel="cancelTime"></u-datetime-picker>
    </view>
</template>

<script>
import { useradd } from "@/api/user.js"
export default {
    components: {},
    props: {},
    data() {
        return {
            type: '4',
            timeSelect: '请选择有效期',
            username: '',
            pass_show: '',
            show: false,
            passShow: true,
            id: '',
            timeValue: '',
            image_clear: 1,
            save_area: '',
            max_vihicle_count: '',
            wechat: '',
            content: ''
        };
    },
    watch: {},
    methods: {
        submit() {
            if (this.username == '') {
                uni.showToast({
                    title: '请输入用户名',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.pass_show == '') {
                uni.showToast({
                    title: '请输入密码',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.timeSelect == '请选择有效期') {
                uni.showToast({
                    title: '请选择商户有效期',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.save_area == '') {
                uni.showToast({
                    title: '请输入云空间大小',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.max_vihicle_count == '') {
                uni.showToast({
                    title: '请输入商户最大车辆数',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            if (this.wechat == '') {
                uni.showToast({
                    title: '请输入商户微信账号',
                    icon: 'none',
                    mask: true
                })
                return false;
            }
            useradd({
                username: this.username,
                pass_show: this.pass_show,
                type: this.type,
                id: this.id,
                losttime: this.timeSelect,
                image_clear: this.image_clear,
                save_area: this.save_area,
                max_vihicle_count: this.max_vihicle_count,
                wechat: this.wechat,
                content: this.content
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.showToast({
                        title: '成功～',
                        icon: 'none',
                        mask: true
                    })
                    setTimeout(() => {
                        uni.navigateBack({ delta: 1 })
                    }, 2000)
                }
            })
        },
        formatter(type, value) {
            if (type === 'year') {
                return `${value}年`
            }
            if (type === 'month') {
                return `${value}月`
            }
            if (type === 'day') {
                return `${value}日`
            }
            return value
        },
        confirmTime(e) {
            console.log(e)
            this.timeSelect = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
            console.log(uni.$u.timeFormat(e.value, 'yyyy-mm-dd'))
            this.show = false;
        }
    },
    onShow() { },
    onLoad(option) {
        if (option.type == 'edit') {
            uni.setNavigationBarTitle({
                title: '编辑用户'
            });
            const item = JSON.parse(decodeURIComponent(option.info));
            console.log(item)
            this.username = item.mobile;
            this.pass_show = item.pass_show;
            this.timeSelect = item.user_detail.losttime_show;
            this.image_clear = item.user_detail.image_clear;
            this.save_area = item.user_detail.save_area;
            this.max_vihicle_count = item.user_detail.max_vihicle_count;
            this.wechat = item.user_detail.wechat;
            this.content = item.user_detail.content;
            this.id = item.id;
        }
        console.log(option)
    },
};
</script>
<style scoped lang='scss'>
.item {
    width: 94%;
    height: 90rpx;
    border-bottom: 1px solid #efefef;
    margin: auto;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 30%;
        font-size: 28rpx;
        font-weight: 600;
    }

    view:nth-child(2) {
        width: 70%;

        input {
            font-size: 28rpx;
            width: 100%;
            height: 100%;
            text-align: right;
        }

    }
}

.items {
    width: 94%;
    height: 90rpx;
    border-bottom: 1px solid #efefef;
    margin: auto;
    display: flex;
    line-height: 90rpx;

    view:nth-child(1) {
        width: 30%;
        font-size: 28rpx;
        font-weight: 600;
    }

    view:nth-child(2) {
        width: 70%;
        text-align: right;
        font-size: 28rpx;
        color: $uni-color-primary;
    }
}

.itemBox {
    display: flex;
    width: 94%;
    height: 110rpx;
    margin: auto;
    line-height: 110rpx;
    border-bottom: 1px solid #efefef;

    .item_1 {
        width: 40%;
    }

    .item_2 {
        width: 50%;
        margin-top: 50rpx;

        text-align: right;
    }
}

.submit {
    width: 94%;
    height: 90rpx;
    background-color: $uni-color-primary;
    border-radius: 50rpx;
    margin: auto;
    margin-top: 130rpx;
    text-align: center;
    line-height: 90rpx;
    color: #fff;
}
</style>